<template>
  <div class="charts">
    <div class="line">
      <direLine :options="lineoptions" @sendLineEcharts="getLineEcharts" />
    </div>
    <div class="bar">
      <direBar :options="baroptions" @sendBarEcharts="getBarEcharts" />
    </div>
    <div class="pie">
      <direPie :options="pieoptions" @sendPieEcharts="getPieEcharts" />
    </div>

  </div>
</template>
<script>
import DireLine from "@/components/DireLine";
import DireBar from "@/components/DireBar";
import DirePie from "@/components/DirePie";
export default {
  components: { DireLine, DireBar, DirePie },
  data() {
    return {
      charts: null,
      lineoptions: {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [170, 230, 224, 218, 135, 147, 260],
            type: "line",
          },
        ],
      },
      baroptions: {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      },
      pieoptions: {
        title: {
          text: "Referer of a Website",
          subtext: "Fake Data",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: [
              { value: 1048, name: "Search Engine" },
              { value: 735, name: "Direct" },
              { value: 580, name: "Email" },
              { value: 484, name: "Union Ads" },
              { value: 300, name: "Video Ads" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },
    };
  },
  methods: {
    getLineEcharts(chartsObj) {
      console.log(chartsObj);
    },
    getBarEcharts(chartsObj) {
      console.log(chartsObj);
    },
    getPieEcharts(chartsObj) {
      console.log(chartsObj);
    },
  },
};
</script>
<style scoped lang="scss">
.charts {
  display: flex;

  .line {
    border: 1px solid red;
    height: 500px;
    width: 500px;
  }
  .bar {
    border: 1px solid red;
    height: 500px;
    width: 500px;
  }
  .pie {
    border: 1px solid red;
    height: 500px;
    width: 500px;
  }
}
</style>